<template>
  <el-container style="height: 100vh;background-color: white;">
    <el-aside class="aside_style">
      <el-menu background-color="#F5DEB3" text-color="white" active-text-color="black" default-active="1"
        :collapse="isCollapse" @select="handleSelect">
        <el-menu-item style="font-size: large; font-family: 'Courier New', Courier, monospace; color: black
          ">
          <el-icon style="margin-right: 15px; fill: #ffffff;">
            <div @click="collapse">
              <Robot style="width: 40px; height: 40px;" />
            </div>
          </el-icon>
          <template #title>Stable Diffusion</template>
        </el-menu-item>
        <el-divider style="width: 90%; margin: 0 auto; border-color: black;  border-width: 3px; border-radius: 3px;" />
        <el-menu-item index="1">
          <el-icon>
            <Home class="aside_icon" />
          </el-icon>
          <template #title>首页 | Home</template>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <Text2img class="aside_icon" />
          </el-icon>
          <template #title>文生图 | Text to Picture</template>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <Img2img class="aside_icon" />
          </el-icon>
          <template #title>图生图 | Picture to Picture</template>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <History_icon class="aside_icon" />
          </el-icon>
          <template #title>历史记录 | History</template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header
        style="height: 6%;background-color: #FBE7C2; display: flex; justify-content: flex-end; align-items: center;">
        <div style="display: flex; align-items: center; gap: 25px;" @click="goToPersonal">
          <el-text size="large" style="font-family: 'Times New Roman', Times, serif;">--Hi! {{ username }}--</el-text>
          <el-avatar :src="useravatar" />
        </div>
      </el-header>
      <el-main style="height: 94%; padding: 0; background-color: #F6F4EF">
        <component :is="currentComponent" />
      </el-main>
    </el-container>

  </el-container>
</template>

<script setup>
import Robot from '@/assets/icons/robot.svg';
import Home from '@/assets/icons/home_icon.svg';
import Text2img from '@/assets/icons/text2img.svg';
import Img2img from '@/assets/icons/img2img.svg';
import History_icon from '@/assets/icons/history.svg';
// 主页main界面
import HomePage from './HomePage.vue';
import text_to_img from './Text2img.vue';
import img_to_img from './Img2img.vue';
import history_page from './History.vue';
import { ref, markRaw } from 'vue';
import { useRouter } from 'vue-router';

// 界面
const homePage = markRaw(HomePage)
const textToImg = markRaw(text_to_img);
const imgToImg = markRaw(img_to_img);
const historyPage = markRaw(history_page);

const isCollapse = ref(true)
const username = ref("username")
const useravatar = ref(null)
const currentComponent = ref(homePage)
const router = useRouter();

// token
const tokenValue = ref(localStorage.getItem('tokenValue'))

const collapse = () => {
  isCollapse.value = !isCollapse.value;
}
const goToPersonal = () => {
  if (router) {
    router.push('/personal');
  } else {
    console.error("Router is undefined");
  }
}
const handleSelect = (index) => {
  switch (index) {
    case "1":
      currentComponent.value = homePage
      break;
    case "2":
      currentComponent.value = textToImg
      break;
    case "3":
      currentComponent.value = imgToImg
      break;
    case "4":
      currentComponent.value = historyPage
      break;
    default:
      break;
  }
}

const setCookie = (name, value, days) => {
  var expires = "";
  if (days) {
    var date = new Date()
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

setCookie('satoken', tokenValue.value, 7);

const getUserInfo = () => {
  fetch('http://localhost:8080/api/user/getUser', {
    method: 'GET',
    credentials: 'include',
    headers: {
      'Accept': 'application/json',
    }
  }).then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`)
    }
    return response.json()
  }).then(data => {
    username.value = data['username'],
    useravatar.value = data['avatar']
  }).catch(error => console.error('Error: ', error));
}

getUserInfo();
</script>

<style scoped>
.aside_style {
  height: 100%;
  width: auto;
  background-color: #F5DEB3;
}

.aside_menu {
  min-width: 100px;
}

.el-menu-item {
  margin: 20px 0;
}

.aside_icon {
  fill: inherit;
  width: 30px;
  height: 30px;
}
</style>